<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <title>管理员管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
<!--    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=76e7d4bddd0c61640b4ed94a44b5ac1e&plugin=AMap.CitySearch"></script>-->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=76e7d4bddd0c61640b4ed94a44b5ac1e"></script>
    <script src="https:////webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="/static/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>
    <style type="text/css">
        .readOnly{
            color: rgba(90, 39, 40, 0.4);

        }
        .info{
            margin-top: 3px;
            font-size: 12px;
            color: rgba(0,0,0,0.6);
        }
        .uploadImg {
            border: none;
            width: 150px;
            display: block;
            margin-top: 10px;
        }
        #pickerBox {
            position: absolute;
            z-index: 9999;
            top: 50px;
            right: 30px;
            width: 300px;
        }

        #pickerInput {
            width: 200px;
            padding: 5px 5px;
        }

        #poiInfo {
            background: #fff;
        }
        .amap_lib_placeSearch .poibox.highlight {
            background-color: #CAE1FF;
        }

        .amap_lib_placeSearch .poi-more {
            display: none!important;
        }
    </style>

</head>
<body>

<form class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;"  onkeydown="if(event.keyCode==13)return false;" >
    <div class="layui-form-item">
        <label class="layui-form-label">机构名称</label>
        <div class="layui-input-block">
            <input type="text" value="{$institutionInfo['ins_name']}" {if $isInstitutionAdmin}readonly{/if}  name="ins_name" lay-verify="required" placeholder="请输入机构名称" autocomplete="off" class="layui-input">
            {if $isInstitutionAdmin}
            <p class="info">若要修改机构名称，请联系系统管理员</p>
            {/if}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">包含课程</label>
        <div class="layui-input-block">
            {volist name="checkBoxList" id="vo"}
            <input type="checkbox" name="ins_lessons[]" value="{$vo['value']}" lay-skin="primary" title="{$vo['title']}" {if $vo['isCheck']==$Status['on']}checked{/if} >
            {/volist}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">机构电话</label>
        <div class="layui-input-block">
            <input type="number" name="ins_mobile" value="{$institutionInfo['ins_mobile']}"  placeholder="请输入机构电话" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-block">
            <input type="text" value="{$institutionInfo['ins_location']}" name="ins_location" lay-verify="required" placeholder="请输入机构详细地址" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--这个div用来放置地图-->
    <div class="layui-form-item">
        <label class="layui-form-label">选取地址</label>
        <div class="layui-input-block" style="height: 500px;">
            <div id="container" style="width: 100%;height: 100%;"></div>
            <div id="pickerBox">
                <input id="pickerInput" placeholder="输入关键字选取地点" />
                <div id="poiInfo"></div>
            </div>
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地理经度</label>
        <div class="layui-input-block">
            <input type="text" value="{$institutionInfo['ins_longitude']}" name="ins_longitude" id="ins_longitude" readonly autocomplete="off" class="layui-input readOnly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地理纬度</label>
        <div class="layui-input-block">
            <input type="text" value="{$institutionInfo['ins_latitude']}" name="ins_latitude" id="ins_latitude"  readonly autocomplete="off" class="layui-input readOnly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">缩放层级</label>
        <div class="layui-input-block">
            <input type="text" value="{$institutionInfo['ins_zoom']}" name="ins_zoom" id="ins_zoom" readonly autocomplete="off" class="layui-input readOnly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属城市</label>
        <div class="layui-input-block">
            <select name="ins_city_id">
                {volist name="cityList" id="vo"}
                <option value="{$vo['cty_id']}" {if $institutionInfo['ins_city_id']==$vo['cty_id']}selected{/if}>{$vo['cty_name']}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">管理员</label>
        <div class="layui-input-block">
            <input type="text" value="{$institutionInfo['bind_admin']['adm_realname']}" name="adm_name" readonly  autocomplete="off" class="layui-input readOnly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-block">
            <input type="text" value="{$institutionInfo['ins_connect_name']}" name="ins_connect_name" lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">机构图片1</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="upload">上传图片</button>
                {if $institutionInfo['ins_thumb']}
                <img id="demo1" class="uploadImg" src="{$institutionInfo['ins_thumb']}">
                {else/}
                <img id="demo1" class="uploadImg" >
                {/if}
                <input type="hidden" name="ins_thumb" id="ins_thumb" value="{$institutionInfo['ins_thumb']}">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">机构图片2</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="upload2">上传图片</button>
                {if $institutionInfo['ins_thumb2']}
                <img id="demo2" class="uploadImg" src="{$institutionInfo['ins_thumb2']}">
                {else/}
                <img id="demo2" class="uploadImg" >
                {/if}
                <input type="hidden" name="ins_thumb2" id="ins_thumb2" value="{$institutionInfo['ins_thumb2']}">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">机构图片3</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="upload3">上传图片</button>
                {if $institutionInfo['ins_thumb3']}
                <img id="demo3" class="uploadImg" src="{$institutionInfo['ins_thumb3']}">
                {else/}
                <img id="demo3" class="uploadImg" >
                {/if}
                <input type="hidden" name="ins_thumb3" id="ins_thumb3" value="{$institutionInfo['ins_thumb3']}">
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">机构介绍</label>
        <div class="layui-input-block" style="z-index: 1;">
                                    <textarea name="ins_content" id="about" cols="30"
                                              rows="10">{$institutionInfo['ins_content']}</textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">跳转地址</label>
        <div class="layui-input-block">
            <input type="text" value="{$institutionInfo['ins_url']}" name="ins_url" placeholder="如果要跳转至自定义页面，请填写此数据"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">招生链接</label>
        <div class="layui-input-block">
            <input type="text" value="{$institutionInfo['ins_student_url']}" name="ins_student_url" placeholder="如果要跳转至自定义招生页面，请填写此数据"  autocomplete="off" class="layui-input">
        </div>
    </div>

    {if !$isInstitutionAdmin}
    <div class="layui-form-item">
        <label class="layui-form-label">浏览次数</label>
        <div class="layui-input-block">
            <input type="text" value="{$institutionInfo['ins_view_times']}" name="ins_view_times" placeholder="不填默认为10"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否置顶</label>
        <div class="layui-input-inline">
            <input type="checkbox" lay-filter="switch" name="ins_istop" lay-skin="switch" lay-text="是|否" {if $institutionInfo['ins_istop']==1}checked{/if}>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <input type="checkbox" {if $institutionInfo['ins_status']==$Status['on']}checked{/if} lay-filter="switch" name="ins_status" lay-skin="switch" lay-text="已启用|未启用">
        </div>
    </div>
    {/if}
    <div class="layui-form-item layui-hide">
        <button class="layui-btn" lay-submit lay-filter="edit" id="edit">提交</button>
    </div>
</form>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    var ue = UE.getEditor("about", {initialFrameHeight: 300, initialFrameWidth: 843.2}); //富文本编辑器对象
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form',"upload"], function(){
        var $ = layui.$
            ,form = layui.form
            , upload = layui.upload;

        //图片上传
        var uploadInst1= upload.render({
            elem: '#upload'
            , url: "{:url('admin/article/uploadImg')}"
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                var src = res.data.src;
                $("#ins_thumb").val(src);
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        var uploadInst2= upload.render({
            elem: '#upload2'
            , url: "{:url('admin/article/uploadImg')}"
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo2').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                var src = res.data.src;
                $("#ins_thumb2").val(src);
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        var uploadInst3= upload.render({
            elem: '#upload3'
            , url: "{:url('admin/institution/uploadImg')}"
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo3').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                var src = res.data.src;
                $("#ins_thumb3").val(src);
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });



        //地图操作，如果已经有定位了
        {if $isPosition}
        var marker=new AMap.Marker({
            //获取点击点的经纬度
            position: [{$institutionInfo['ins_longitude']},{$institutionInfo['ins_latitude']}]
        });
        var map = new AMap.Map('container', {
            zoom:{$institutionInfo['ins_zoom']},//级别
            viewMode:'3D',//使用3D视图
            center:[{$institutionInfo['ins_longitude']},{$institutionInfo['ins_latitude']}]
        });
        map.add(marker);

        {else/}
            var marker=new AMap.Marker({});
            var map = new AMap.Map('container', {
                zoom:11,//级别
                viewMode:'3D'//使用3D视图
            });


        {/if}

            AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
                var poiPicker = new PoiPicker({
                    //city:'北京',
                    input: 'pickerInput'
                });

                //初始化poiPicker
                poiPickerReady(poiPicker);
            });

            function poiPickerReady(poiPicker) {

                window.poiPicker = poiPicker;

                marker = new AMap.Marker();

                var infoWindow = new AMap.InfoWindow({
                    offset: new AMap.Pixel(0, -20)
                });

                //选取了某个POI
                poiPicker.on('poiPicked', function(poiResult) {

                    var source = poiResult.source,
                        poi = poiResult.item,
                        info = {
                            source: source,
                            id: poi.id,
                            name: poi.name,
                            location: poi.location.toString(),
                            address: poi.address
                        };

                    marker.setMap(map);
                    infoWindow.setMap(map);

                    marker.setPosition(poi.location);
                    infoWindow.setPosition(poi.location);

                    // infoWindow.setContent('地址点信息: <pre>' + JSON.stringify(info, null, 2) + '</pre>');
                    infoWindow.open(map, marker.getPosition());


                    // console.log(poi);
                    let location=poi.location;
                    let longitude=location.Q;
                    let latitude=location.P;
                    $("#ins_longitude").val(longitude);
                    $("#ins_latitude").val(latitude);
                    //取不到值，默认取11；
                    let zoom=11;
                    $("#ins_zoom").val(zoom);
                });
            }

           map.on('click', function(e) {
                    //获得点击参数，显示到页面上
                    var longitude=e.lnglat.getLng();
                    var latitude=e.lnglat.getLat();
                    var zoom=map.getZoom();
                    $("#ins_longitude").val(longitude);
                    $("#ins_latitude").val(latitude);
                    $("#ins_zoom").val(zoom);
                    // map.remove(marker);
                    map.clearMap();
                    marker = new AMap.Marker({
                        //获取点击点的经纬度
                        position: [e.lnglat.getLng(), e.lnglat.getLat()]
                    });
                    map.add(marker);//添加到地图
                });

            })
</script>
<script>

</script>
</body>
</html>
